<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>弹窗层</title>
		<link rel="stylesheet" href="../../css/bootstrap.min.css" />
		<style type="text/css">
			.modal-backdrop.in{
				opacity: 0.05;/*改变弹出层大背景色*/
			}
		</style>
	</head>
	<body style="height: 2000px;">
		<!--
        	注意
        	1、弹出层必须放在body里
        	2、弹出层里面不能再嵌套别的层
        	3、弹出层出来以后，页面的滚动条会被覆盖
        	
        	modal              弹出层父级
        	modal-dialog       弹出层
        	modal-content      弹出层的内容区域
        	modal-header       弹出层的头部区域
        	modal-body         弹出层的主体区域
        	modal-footer       弹出层的底部区域
        	data-dismiss       关闭事件
        	fade               让弹出层有一个运动的效果
        -->
        <div class="container">
        	<div class="row">
        		<button class="btn btn-primary" data-toggle="modal" data-target=".myModal1">弹出一个小层</button>
        		<button class="btn btn-primary" data-toggle="modal" data-target=".myModal2">弹出一个大层</button>
        		<button class="btn btn-primary" data-toggle="modal" data-target=".myModal3">弹出一个小小层</button>
        	</div>
        </div>
        <!-- 弹出一个小层 -->
        <div class="modal fade myModal1">
        	<div class="modal-dialog">
        		<div class="modal-content">
        			<div class="modal-header">
        				<button class="close" data-dismiss="modal">&times;</button>
        				<h4>海棠学院</h4>
        			</div>
        			<div class="modal-body">
        				<p>选举人团结果公布后，特朗普紧接着发送了一条新推文，称“我们赢了!感谢我伟大的支持者们;我们刚刚正式赢得了大选，尽管有那么多歪曲事实、不靠谱的媒体。”</p>
        			</div>
        			<div class="modal-footer">
        				<button class="btn btn-primary" data-dismiss="modal">确定</button>
        			</div>
        		</div>
        	</div>
        </div>
        <!-- 弹出一个大层 -->
        <div class="modal fade myModal2">
        	<!-- modal-lg是用来设置弹出层的尺寸，它必须给modal-dialog的层 -->
        	<div class="modal-dialog modal-lg">
        		<div class="modal-content">
        			<div class="modal-header">
        				<button class="close" data-dismiss="modal">&times;</button>
        				<h4>海棠学院</h4>
        			</div>
        			<div class="modal-body">
        				<p>选举人团结果公布后，特朗普紧接着发送了一条新推文，称“我们赢了!感谢我伟大的支持者们;我们刚刚正式赢得了大选，尽管有那么多歪曲事实、不靠谱的媒体。”</p>
        				<p>选举人团结果公布后，特朗普紧接着发送了一条新推文，称“我们赢了!感谢我伟大的支持者们;我们刚刚正式赢得了大选，尽管有那么多歪曲事实、不靠谱的媒体。”</p>‘
        				<p>选举人团结果公布后，特朗普紧接着发送了一条新推文，称“我们赢了!感谢我伟大的支持者们;我们刚刚正式赢得了大选，尽管有那么多歪曲事实、不靠谱的媒体。”</p>
        			</div>
        			<div class="modal-footer">
        				<button class="btn btn-primary" data-dismiss="modal">确定</button>
        			</div>
        		</div>
        	</div>
        </div>
        <!-- 弹出一个小小层 -->
        <div class="modal fade myModal3">
        	<!-- modal-lg是用来设置弹出层的尺寸，它必须给modal-dialog的层 -->
        	<div class="modal-dialog modal-sm">
        		<div class="modal-content">
        			<div class="modal-header">
        				<button class="close" data-dismiss="modal">&times;</button>
        				<h4>海棠学院</h4>
        			</div>
        			<div class="modal-body">
        				<p>选举人团结果公布后，特朗普紧接着发送了一条新推文，称“我们赢了!感谢我伟大的支持者们;我们刚刚正式赢得了大选，尽管有那么多歪曲事实、不靠谱的媒体。”</p>
        			</div>
        			<div class="modal-footer">
        				<button class="btn btn-primary" data-dismiss="modal">确定</button>
        			</div>
        		</div>
        	</div>
        </div>
		<script type="text/javascript" src="../../js/jquery-2.1.0.js" ></script>
		<script type="text/javascript" src="../../js/bootstrap.min.js" ></script>
	</body>
</html>
